<template>
  <div class="app-foot-content">
    <ul>
      <li v-for="(item,index) in foots" :key="index"
          @click="clickFoot(item.name)" :style="itemDivStyleWidth"
          :class="item.id === selectedItem ? 'selected' : ''">
        <div :class="'iconfont '+item.iconClass">{{item.text}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AppFoot',
  data () {
    return {
      itemDivStyleWidth: '',
      selectedItem: this.selectedId
    }
  },
  props: {
    selectedId: {
      type: Number,
      default: 1
    },
    foots: {
      type: Array,
      default: () => [
        {
          id: 1,
          name: 'AppIndex',
          text: '首页',
          iconClass: 'icon-message'
        },
        {
          id: 2,
          name: 'AppIndex',
          text: '频道',
          iconClass: 'icon-scanQR'
        },
        {
          id: 3,
          name: 'AppIndex',
          text: '动态',
          iconClass: 'icon-message'
        },
        {
          id: 4,
          name: 'AppIndex',
          text: '会员购',
          iconClass: 'icon-message'
        },
        {
          id: 5,
          name: 'AppMyInfo',
          text: '我的',
          iconClass: 'icon-message'
        }
      ]
    }
  },
  mounted () {
    this.renderResize()
    window.addEventListener('resize', this.renderResize, false)
  },
  methods: {
    clickFoot (name) {
      this.$router.push({name: name})
    },
    renderResize () {
      const width = document.documentElement.clientWidth
      const itemSize = this.foots.length
      this.itemDivStyleWidth = 'width:' + width / itemSize + 'px;'
    }
  }
}
</script>

<style lang="less" scoped>
  @media screen and (orientation: portrait){
    .app-foot-content{
      display: block;
    }
  }
  @media screen and (orientation: landscape) {
    .app-foot-content{
      display: none;
    }
  }
  .app-foot-content {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: white;

    ul {
      list-style-type: none;

      li {
        float: left;
        width: auto;
        margin-bottom: .2rem;
        text-align: center;

        .iconfont {
          font-size: .7rem;

          &:before {
            margin-left: calc((100% - 1.8rem) / 2);
            margin-right: calc((100% - 1.8rem) / 2);
            font-size: 1.8rem;
            height: 50%;
          }
        }
      }
    }
  }
</style>
